<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jslib/echarts.min.js"></script>
</head>
<body>
<button id="showChart_btn" onclick="showChart()">show chart</button>
<div id="chart_div" style="width: 800px; height: 600px;"></div>

<script type="text/javascript">
    // data = [];
    function showChart() {

        var data = [
            {value: Math.ceil(Math.random() * 100), name: "python"},
            {value: Math.ceil(Math.random() * 100), name: "java"},
            {value: Math.ceil(Math.random() * 100), name: "c#"},
            {value: Math.ceil(Math.random() * 100), name: "php"},
            {value: Math.ceil(Math.random() * 100), name: "c++"}
        ];
        // alert('echarts');
        var chart = echarts.init(document.getElementById("chart_div"));
        option = {
    title : {
        text: '编程语言使用情况',
        subtext: '2018年最新数据',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['python','java','c#','php','c++']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:data
        }
    ]
};

timeTicket1 = setInterval(function () {

    data = [
    {value: Math.ceil(Math.random() * 100), name: "python"},
    {value: Math.ceil(Math.random() * 100), name: "java"},
    {value: Math.ceil(Math.random() * 100), name: "c#"},
    {value: Math.ceil(Math.random() * 100), name: "php"},
    {value: Math.ceil(Math.random() * 100), name: "c++"}
];
    option.series[0].data = data;
    chart.setOption(option);
    console.log(data);
}, 2000);

// timeTicket1();
    }



</script>
</body>
</html>